import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

// 创建icons目录
const iconsDir = path.join(__dirname, '../icons')
if (!fs.existsSync(iconsDir)) {
  fs.mkdirSync(iconsDir, { recursive: true })
}

// 生成SVG图标
function generateIcon(size) {
  return `
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#ee5a24;stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <!-- 背景圆形 -->
  <circle cx="${size/2}" cy="${size/2}" r="${size/2 - 2}" fill="url(#grad)" />
  
  <!-- 小红书logo样式的图案 -->
  <g transform="translate(${size/2},${size/2})">
    <!-- 玫瑰花图案 -->
    <circle cx="0" cy="-${size/8}" r="${size/12}" fill="white" opacity="0.9"/>
    <circle cx="-${size/10}" cy="-${size/12}" r="${size/14}" fill="white" opacity="0.8"/>
    <circle cx="${size/10}" cy="-${size/12}" r="${size/14}" fill="white" opacity="0.8"/>
    <circle cx="0" cy="${size/16}" r="${size/16}" fill="white" opacity="0.7"/>
    
    <!-- 茎部 -->
    <rect x="-${size/32}" y="${size/8}" width="${size/16}" height="${size/4}" fill="white" opacity="0.6" rx="${size/64}"/>
  </g>
  
  <!-- 文字 XHS -->
  <text x="${size/2}" y="${size - size/6}" text-anchor="middle" 
        font-family="Arial, sans-serif" font-size="${size/8}" font-weight="bold" fill="white">
    XHS
  </text>
</svg>`.trim()
}

// 简化版PNG数据生成函数（实际项目中建议使用专业的图像处理库）
function generateSimplePNG(size) {
  // 这里生成一个简单的PNG数据头，实际应用中建议使用canvas或图像库
  const canvas = `
  <svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
    <rect width="${size}" height="${size}" fill="#ff6b6b" rx="${size/8}"/>
    <text x="${size/2}" y="${size/2 + size/12}" text-anchor="middle" 
          font-family="Arial" font-size="${size/3}" fill="white">🌹</text>
  </svg>`
  
  return canvas
}

// 生成不同尺寸的图标
const sizes = [16, 48, 128]

console.log('开始生成图标文件...')

sizes.forEach(size => {
  // 生成SVG图标
  const svgContent = generateIcon(size)
  const svgPath = path.join(iconsDir, `icon${size}.svg`)
  fs.writeFileSync(svgPath, svgContent)
  
  // 生成简化的PNG图标（在实际项目中应该使用专业的转换工具）
  const pngContent = generateSimplePNG(size)
  const pngPath = path.join(iconsDir, `icon${size}.png`)
  
  // 这里我们先保存为SVG格式，实际使用时建议转换为真正的PNG
  fs.writeFileSync(pngPath.replace('.png', '_temp.svg'), pngContent)
  
  console.log(`✅ 生成图标: icon${size}.svg`)
})

// 创建一个README文件说明图标使用
const iconReadme = `
# 图标文件说明

本目录包含Chrome扩展所需的图标文件：

- icon16.svg/png - 16x16像素，用于扩展图标
- icon48.svg/png - 48x48像素，用于扩展管理页面
- icon128.svg/png - 128x128像素，用于Chrome应用商店

## 注意事项

1. SVG文件已生成，PNG文件需要使用专业工具转换
2. 图标采用渐变红色主题，符合小红书品牌色彩
3. 包含玫瑰花元素和XHS字样

## 转换为PNG

建议使用以下工具将SVG转换为PNG：
- Inkscape: inkscape icon16.svg --export-png=icon16.png
- ImageMagick: convert icon16.svg icon16.png
- 在线工具: https://cloudconvert.com/svg-to-png

或者使用设计软件如Figma、Sketch等打开SVG并导出为PNG。
`

fs.writeFileSync(path.join(iconsDir, 'README.md'), iconReadme.trim())

console.log('🎉 图标生成完成！')
console.log('📂 图标文件位于: icons/')
console.log('⚠️ 请将SVG文件转换为PNG格式以确保兼容性')
console.log('💡 运行 npm run build:crx 来构建完整的扩展包') 